<template>
	<view class="page-main">
		<view class="">
			<view class="home-avatar form-box">
				<view class="titel">
					<text>
						首页头像
					</text>
					<text style="font-size: 25rpx;color: red;">
						（建议尺寸：1:1）
					</text>
				</view>
				<view style="width: 250rpx;height: 250rpx;margin: 30rpx auto;padding-left: 10px;position:relative;">
					<uni-file-picker ref="avatarFile" v-model="avatarImageValue" fileMediatype="image" mode="grid" limit="1"
						:del-icon="false" :image-styles="avatarImageStyles" :auto-upload="false"
						@select="uploadAvatarSelect" @success="uploadAvatarSuccess" @fail="uploadFail">
						<view class="file-add-avatar">
							<view class="file-add-icon-avatar">
								<u--image src="/static/upload-image.png" width="60px" height="60px" />
							</view>
							<text>选择头像</text>
						</view>
					</uni-file-picker>
					<view class="file-close-avatar-button" v-if="isSelectAvatar" @click="delAvatar">
						<view class="close-icon">
							<u-icon name="close" color="#ffffff" bold />
						</view>
					</view>
				</view>
				<u-button type="success" @click="uploadAvatar">确认上传</u-button>
			</view>
			
			<view class="background form-box">
				<view class="titel">
					<text>背景图片</text>
					<text style="font-size: 25rpx;color: red;">
						（建议尺寸：手机壁纸）
					</text>
				</view>
				<view style="width: 235rpx;height: 350rpx;margin: 30rpx auto;">
					<uni-file-picker ref="backgroundFile" v-model="backgroundImageValue" fileMediatype="image" mode="grid"
						limit="1" :image-styles="backgroundImageStyles" :auto-upload="false"
						@select="uploadBackgroundSelect" @success="uploadBackgroundSuccess" @fail="uploadFail">
						<view class="file-add-background">
							<view class="file-add-icon-background">
								<u--image src="/static/upload-image.png" width="60px" height="60px" />
							</view>
							<text>选择背景图片</text>
						</view>
					</uni-file-picker>
				</view>
				<u-button type="success" @click="uploadBackground">确认上传</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelectAvatar: false,
				avatarImageValue: [],
				avatarImageStyles: {
					"height": "250rpx",
					"width": "250rpx",
					"border": {
						"color": "#eee",
						"width": "2px",
						"style": "solid",
						"radius": "50%"
					}
				},
				backgroundImageValue: [],
				backgroundImageStyles: {
					"height": "350rpx",
					"width": "100%",
					"border": {
						"color": "#eee",
						"width": "2px",
						"style": "solid",
					}
				}
			}
		},
		onLoad() {

			if (this.vuex_user.state > 0) {
				const db = uniCloud.database();
				db.collection('partner_config').doc(this.vuex_user.configId).get({
					getOne: true
				}).then((res) => {
					let data = res.result.data
					if (data.avatar) {
						this.isSelectAvatar = true;
						this.avatarImageValue = [{
							url: data.avatar
						}]
					}
					if (data.pageBackground) {
						this.backgroundImageValue = [{
							url: data.pageBackground
						}]
					}
				})
			}

		},
		methods: {
			//获取上传状态
			uploadAvatarSelect(e) {
				if (e.tempFiles[0].size > 100 * 1024) {
					this.$refs.avatarFile.clearFiles();
					uni.$u.toast('文件过大，请压缩后上传');
					return;
				}
				this.isSelectAvatar = true;
			},
			uploadBackgroundSelect(e) {
				if (e.tempFiles[0].size > 150 * 1024) {
					this.$refs.backgroundFile.clearFiles();
					uni.$u.toast('文件过大，请压缩后上传');
					return;
				}
			},
			//上传按钮事件
			uploadAvatar() {
				if (this.vuex_user.state == 0) {
					uni.$u.toast('请先绑定伴侣');
					return;
				}
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				this.$refs.avatarFile.upload();
			},
			uploadBackground() {
				if (this.vuex_user.state == 0) {
					uni.$u.toast('请先绑定伴侣');
					return;
				}
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				this.$refs.backgroundFile.upload();
			},
			//上传成功
			uploadAvatarSuccess(e) {
				let imagesUrl = this.avatarImageValue[0].url,
					configId = this.vuex_user.configId
				const db = uniCloud.database();

				db.collection('partner_config').doc(configId).update({
					avatar: imagesUrl
				}).then((res) => {
					let avatar = this.$tools.getPartnerConfig().avatar
					if (avatar) {
						uniCloud.callFunction({
							name: 'deleteFile',
							data: {
								fileList: [avatar]
							}
						})
					}
					uni.hideLoading();
					this.$tools.setPartnerConfig({
						avatar: imagesUrl
					})
					uni.$u.toast('上传成功');
				}).catch(err => {
					uni.hideLoading();
					uni.$u.toast(err.message)
				});

			},
			uploadBackgroundSuccess(e) {
				let bgImagesUrl = this.backgroundImageValue[0].url,
					configId = this.vuex_user.configId

				const db = uniCloud.database();
				db.collection('partner_config').doc(configId).update({
					pageBackground: bgImagesUrl
				}).then((res) => {
					let pageBackground = this.$tools.getPartnerConfig().pageBackground
					if (pageBackground) {
						uniCloud.callFunction({
							name: 'deleteFile',
							data: {
								fileList: [pageBackground]
							}
						})
					}
					uni.hideLoading();
					this.$tools.setPartnerConfig({
						pageBackground: bgImagesUrl
					})
					uni.$u.toast('上传成功');
				}).catch(err => {
					uni.hideLoading();
					uni.$u.toast(err.message)
				});
			},
			//上传失败
			uploadFail(e) {
				uni.$u.toast('上传失败')
				uni.hideLoading();
			},
			delAvatar(e) {
				this.$refs.avatarFile.clearFiles();
				this.isSelectAvatar = false;
			}

		}
	}
</script>

<style>
	.form-box {
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.85);
	}
	
	.home-avatar,
	.background {
		margin:0 0 50rpx;
	}

	.titel {
		font-size: 32rpx;
	}

	.file-close-avatar-button {
		position: absolute;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		top: 5px;
		right: 15px;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.close-icon {
		margin: 5px auto;
		width: 16px;
	}

	.file-add-avatar {
		width: 100%;
		height: 100%;
		background-color: rgb(250, 250, 250);
		text-align: center;
		color: #a5a5a5;
	}

	.file-add-icon-avatar {
		width: 60px;
		height: 60px;
		padding-top: 30rpx;
		margin: auto;
	}

	.file-add-background {
		width: 100%;
		height: 100%;
		background-color: rgb(250, 250, 250);
		text-align: center;
		color: #a5a5a5;
	}

	.file-add-icon-background {
		width: 60px;
		height: 60px;
		padding-top: 80rpx;
		margin: auto;
	}
</style>
